import { DictValueEnum } from "@/components/DictTag";
import {
	BetaSchemaForm,
	DrawerForm,
	ProFormInstance,
	ProFormRadio,
	ProFormSelect,
	ProFormText
} from "@ant-design/pro-components";
import React, { useEffect, useRef, useState } from "react";
import {
	mallColumns,
	smsAliyunColumns,
	smsHuaweiColumns,
	smsTencentColumns,
	smsUniColumns,
	smsYunpianColumns,
	smsjdCloudColumns
} from "../constants";
import { getConfig } from "@/services/api/module/message/config";

export type ConfigFormData = Record<string, unknown> & Partial<File>;
export type ConfigFormProps = {
	onCancel: (flag?: boolean) => void;
	onSubmit: (values: ConfigFormData) => Promise<any>;
	configType: DictValueEnum;
	supplierTypeOptions: DictValueEnum;
	statusOptions: DictValueEnum;
	id: number | undefined;
	open: boolean;
};
const titles = ["新增消息配置", "编辑消息配置"];
const ConfigForm: React.FC<ConfigFormProps> = props => {
	const { id, onCancel, onSubmit, open, configType, supplierTypeOptions, statusOptions } = props;
	const extendFormFieldName = ["name", "type", "supplierType", "status"];
	const [columnType, setColumnType] = useState<any>([]);
	const formRef = useRef<ProFormInstance>();
	//定义MAP
	const columnMap = {
		ALIBABA: smsAliyunColumns,
		HUAWEI: smsHuaweiColumns,
		MAIL: mallColumns,
		TENCENT: smsTencentColumns,
		YUNPIAN: smsYunpianColumns,
		UNI_SMS: smsUniColumns,
		JD_CLOUD: smsjdCloudColumns
	} as any;
	//初始化表单
	useEffect(() => {
		formRef?.current?.resetFields();
		if (id) {
			setFormValue(id);
		}
	}, [id]);
	// 表单赋值
	const setFormValue = (id: number) => {
		getConfig(id).then(data => {
			const config = JSON.parse(data?.config as unknown as string);
			let formData = { ...data, ...config };
			setColumnType(columnMap[data?.supplierType]);
			formRef?.current?.setFieldsValue(formData);
		});
	};
	// 关闭
	const handleCancel = () => {
		onCancel();
	};
	// 表单提交
	const handleFinish = async (values: Record<string, any>) => {
		const params = { ...values };
		const config = {};
		const filteredParams = Object.keys(params).filter(key => !extendFormFieldName.includes(key));
		filteredParams.forEach(key => {
			// @ts-ignore
			config[key] = params[key];
		});
		params.config = JSON.stringify(config);
		// @ts-ignore
		return onSubmit({
			...params,
			id: id ? id : undefined
		} as ConfigFormData);
	};

	//切换
	const switchColumn = (value: string) => {
		setColumnType(columnMap[value]);
	};

	return (
		<>
			<DrawerForm
				open={open}
				grid={true}
				title={id ? titles[1] : titles[0]}
				formRef={formRef}
				drawerProps={{
					destroyOnClose: true,
					onClose: () => {
						handleCancel();
					}
				}}
				onFinish={handleFinish}
			>
				<ProFormText
					colProps={{ xs: 24, md: 12, lg: 12 }}
					name="name"
					label="配置名称"
					placeholder="请输入配置名称"
					rules={[
						{
							required: true,
							message: "请输入配置名称"
						}
					]}
				/>
				<ProFormSelect
					name="type"
					colProps={{ xs: 24, md: 12, lg: 12 }}
					label="消息类型"
					valueEnum={configType}
					onChange={() => {}}
					placeholder="请选择消息类型"
					rules={[{ required: true, message: "请选择消息类型" }]}
				/>
				<ProFormSelect
					name="supplierType"
					width="md"
					colProps={{ xs: 24, md: 12, lg: 12 }}
					label="参数所属平台"
					style={{ width: "100%" }}
					valueEnum={supplierTypeOptions}
					onChange={switchColumn}
					placeholder="请选择参数所属平台"
					rules={[{ required: true, message: "请选择参数所属平台" }]}
				/>
				<ProFormRadio.Group
					colProps={{ xs: 24, md: 12, xl: 12 }}
					valueEnum={statusOptions}
					name="status"
					label="状态"
					radioType="button"
					initialValue={"0"}
					placeholder="请选择状态"
					rules={[
						{
							required: true,
							message: "请选择状态"
						}
					]}
				/>
				<BetaSchemaForm layoutType="Embed" columns={columnType} />
			</DrawerForm>
		</>
	);
};
export default ConfigForm;
